<template>
	<div class="h-swipe-container" ref="swipe">
		<ul class="h-swipe-wrapper">
			<li class="h-swipe-slide" v-for="item in swipeList">
				<a :href="item.linkUrl" target="_blank">
					<img :src="item.picUrl || item.pic" alt="">
				</a>
			</li>
		</ul>
		<div class="h-swipe-pagination"></div>
	</div>
</template>

<script>
	import HSwipe from 'hcg-swipe';

	export default {
		name: "Swipe",
		props: {
			swipeList: {
				type: Array,
				required: true
			}
		},
		created() {
			this.swipe = null;
		},
		mounted() {
			this.swipe = new HSwipe({
				el: this.$refs['swipe'],
				pagination: true
			});
		},
		updated() {
			this.$nextTick(() => {
				this.swipe.refresh();
			});
		},
		beforeDestroy() {
			this.swipe = this.swipe.off();
		}
	}
</script>
